<template>
  <div>
    <div>
      <el-steps :active="active" finish-status="success">
        <el-step title="创建活动"></el-step>
        <el-step title="奖品设置"></el-step>
      </el-steps>
    </div>
    <div class="interspaceH"></div>
    <div v-if="active == 0">
        <el-row>
            <el-col :span="12">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
                    <el-form-item label="选择活动模板" prop="activityId">
                        <el-select v-model="ruleForm.activityId" placeholder="活动模板">
                            <el-option
                                    v-for="item in activity"
                                    :key="item.activityId"
                                    :label="item.activityName"
                                    :value="item.activityId" />
                        </el-select>
                    </el-form-item>
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="ruleForm.name" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="活动时间" prop="time">
<!--          <el-date-picker v-model="ruleForm.time" type="daterange" :picker-options="pickerOptions1" align="right" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>-->
            <el-date-picker
                    v-model="ruleForm.time"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="timestamp">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="活动详情" prop="luckyDrawMassage">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="ruleForm.luckyDrawMassage" style="width: 400px" />
        </el-form-item>
        <el-form-item label="中奖次数" prop="lotteryRulesTotal">
          每人最多<el-input v-model="ruleForm.lotteryRulesTotal" style="width: 50px"></el-input>次
        </el-form-item>
        <el-form-item prop="lotteryRulesPerday" label="每人每天抽奖次数">
            <el-input v-model="ruleForm.lotteryRulesPerday" style="width: 50px"></el-input>次
        </el-form-item>
        <el-form-item prop="perNum" label="每人总共抽奖次数">
            <el-input v-model="ruleForm.perNum" style="width: 50px"></el-input>次
        </el-form-item>
        <el-form-item label="助力人数" prop="lotteryRulesProportion">
            拉<el-input v-model="ruleForm.lotteryRulesProportion" style="width: 50px"></el-input>人助力可得一次抽奖机会
        </el-form-item>
        <el-form-item label="参与活动标签" prop="clientTagsId">
<!--            <el-select v-model="ruleForm.tagName" placeholder="选择标签">-->
<!--                <el-option-->
<!--                        v-for="item in tagList"-->
<!--                        :key="item.tagId"-->
<!--                        :label="item.tagName"-->
<!--                        :value="item.tagId" />-->
<!--            </el-select>-->


            <el-cascader v-model="ruleForm.tagName" :options="options" clearable></el-cascader>

        </el-form-item>

      </el-form>
            </el-col>
            <el-col :span="12">
                <iframe src="http://wx.zzxapps.com/pages/preview/show/zhuanpan" frameborder="0" style="width: 300px;height: 560px;"></iframe>
            </el-col>
        </el-row>
      <div>
        <el-button @click="back">返回列表</el-button>
        <el-button type="primary" @click="next">下一步</el-button>
      </div>
    </div>

    <div v-if="active == 1">
        <el-row>
            <el-col :span="15">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item>
          <el-table
            :data="tableData"
            style="width: 100%">
              <el-table-column
                  type="index"
                  label="序号">
            </el-table-column>
            <el-table-column
              prop="prizesName"
              label="名称">
            </el-table-column>
            <el-table-column
              prop="prizesType"
              label="奖品类型">
            </el-table-column>
<!--            <el-table-column
              prop="prizesImages"
              label="图片">
            </el-table-column>-->
            <el-table-column
              prop="prizesPoolNum"
              label="数量">
            </el-table-column>
            <el-table-column
              prop="prizesChance"
              label="中奖概率">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                  <el-button @click="formHandle('edit', scope.row)" type="text" size="small">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-form-item>
              <el-button type="primary" size="small" @click="formHandle('add')">+ 添加</el-button>
          </el-form-item>
        </el-form-item>
        <el-form-item label="引流员工" prop="empId">
            <el-select v-model="ruleForm.empId" placeholder="选择引流员工">
                <el-option
                        v-for="item in emp"
                        :key="item.empId"
                        :label="item.empName"
                        :value="item.empId" />
            </el-select>
        </el-form-item>
        <el-form-item label="员工提醒时间" prop="reminder">
            <el-date-picker
                    v-model="ruleForm.reminder"
                    type="datetime"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    default-time="12:00:00">
            </el-date-picker>
        </el-form-item>
      </el-form>
            </el-col>
            <el-col :span="9">
                <iframe src="http://wx.zzxapps.com/pages/preview/show/zhuanpan" frameborder="0" style="width: 300px;height: 560px;"></iframe>
            </el-col>
        </el-row>
      <div>
        <el-button @click="up">上一步</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
        <el-button type="primary" @click="submit">发布</el-button>
      </div>
      <!--添加——编辑-->
      <el-dialog :title="formTitle" :visible.sync="formVisible" :rules="rules" width="30%">
        <el-form ref="formPanel" :rules="rules" :model="formData" label-width="80px">
          <el-form-item label="名称" prop="prizesName" label-width="120px">
            <el-input v-model="formData.prizesName" style="width: 220px"></el-input>
          </el-form-item>
          <el-form-item label="奖品类型" prop="prizesType" label-width="120px">
            <el-select v-model="formData.prizesType" placeholder="请选择类型" style="width: 220px">
              <el-option label="奖品实物" value="1"></el-option>
              <el-option label="电子券" value="2"></el-option>
            </el-select>
          </el-form-item>
<!--          <el-form-item label="图片路径" prop="prizesImages" label-width="120px">
            <el-input v-model="formData.prizesImages" style="width: 220px"></el-input>
          </el-form-item>-->
<!--            <el-form-item label="图片上传" prop="prizesImages" label-width="120px">
                <el-input v-model="formData.prizesImages" style="width: 220px"></el-input>
                <el-upload
                        class="upload-demo"
                        style="display: flex;justify-content: center"
                        drag
                        ref="uploadExcel"
                        :show-file-list="false"
                        :on-success="uploadSuccess"
                        :action="$uri + '/api/friendings/importFriendings/1_0'">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
            </el-form-item>-->
          <el-form-item label="数量" prop="prizesPoolNum" label-width="120px">
            <el-input v-model="formData.prizesPoolNum" style="width: 220px"></el-input>个
          </el-form-item>
          <el-form-item label="概率" prop="prizesChance" label-width="120px">
            <el-input v-model="formData.prizesChance" style="width: 220px"></el-input>%
          </el-form-item>
            <el-form-item>
                <el-button @click="insertPrizes" type="primary">确定</el-button>
                <el-button @click="formVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
const initFormData ={
    prizePoolId : '',
    prizesName: '',
    prizesType: '',
    prizesImages: '',
    prizesPoolNum: 0,
    prizesChance: ''
}
export default {
  name: "first_add",
  data() {
    return{
        pickerOptions1: {
            disabledDate(time) {
                return time.getTime() < Date.now() - 8.64e7;
            },
        },
      active: 0,
        inputVisible: false,
        activityInstance: [],//活动实例查询
        activity: [],
        emp: [],//引流员工查询
        tagList: [],//标签查询

        options: [],


        formData: {...initFormData},
        formTitle: '',
      titles: '添加成员',
      title: '设置奖品',
        formVisible: false,
      //0
      ruleForm: {},
        cishu: [
            {
                column: 'lotteryRulesPerday',
                name: '每人每天',
            },
            {
                column: 'perNum',
                name: '每人仅限',
            },
        ],
      tableData: [],
      inputValue: '',
      rules: {
        activityName: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
          {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
        ],
        time: [
          {required: true, message: '请选择日期', trigger: 'change'}
        ],
        lotteryRulesTotal: [
          {required: true, message: '请输入中奖次数', trigger: 'blur'}
        ],
        canyu: [
          {required: true, message: '请输入参与次数', trigger: 'blur'}
        ],
      },
    }
  },
    mounted() {
        this.queryDataHandle(1, 10);
    },
  methods:{
      queryDataHandle(page = 1, row = 10) {
          let payload = {
              pageNum: page,
              pageSize: row
          }
          let that = this
          that.$request("/api/activity/selectAll/1_0", payload, "POST").then((data) => {
              that.activity = data.rows
          })
          //员工
          let emp = {
              empId: ''
          }
          this.$request("/api/emp/getEmpList/1_0", {emp}, "POST").then((data) => {
              that.emp = data.rows
          })
          //标签
          this.$request("/api/tags/getGroupTagsByParams/1_0", {}, "POST").then((data) => {
              let tags = data.rows
              tags.forEach((item) => {
                  let option = {
                      value : item.tagsGroupId,
                      label : item.tagsGroupName,
                      children : []
                  }
                  // 内层循环
                  item.tagList.forEach((obj) => {
                      let son = {
                          value : obj.tagId,
                          label : obj.tagName,
                      }
                      option.children.push(son)
                  })

                  that.options.push(option)
              })
          })

      },
      insertPrizes() {
          let that = this
          let tableData = that.tableData
          that.$refs['formPanel'].validate((valid) => {
              if (valid) {
                  if (that.formData['prizePoolId'] != null && that.formData['prizePoolId'] != "") {
                      for (let i = 0; i < tableData.length; i++) {
                          if (tableData[i].prizePoolId == that.formData['prizePoolId']) {
                              tableData[i] = that.formData
                          }
                      }
                      that.tableData = [...tableData]
                      that.$message({
                          message: '修改成功',
                          type: 'success'
                      });
                  } else {
                      that.formData['prizePoolId'] = that.$moment(new Date()).valueOf();
                      that.tableData.push({...that.formData})
                      that.formData = {...initFormData}
                      that.$message({
                          message: '添加成功',
                          type: 'success'
                      });
                  }
                  this.formVisible = false
              } else {
                  console.log('error submit!!');
                  return false;
              }
          });
      },
      showInput() {
          this.inputVisible = true;
          this.$nextTick(_ => {
              this.$refs.saveTagInput.$refs.input.focus();
          });
      },
      handleInputConfirm() {
          let inputValue = this.inputValue;
          if (inputValue) {
              this.ruleForm.activityForm.push(inputValue);
          }
          this.inputVisible = false;
          this.inputValue = '';
      },
      handleClose(tag) {
          this.ruleForm.activityForm.splice(this.ruleForm.activityForm.indexOf(tag), 1);
      },
      formHandle(type, row) {
          if (type == 'add') {
              this.formTitle = '添加'
              this.formData = {...initFormData}
          } else if (type == 'edit') {
              this.formTitle = '修改'
              this.formData = {...row}
          }

          this.formVisible = true
      },
    submit() {
          var activityInstance = {
              activityId : this.ruleForm.activityId,
              name: this.ruleForm.name,
              startTime : this.ruleForm.time[0],
              endTime : this.ruleForm.time[1],
              luckyDrawMassage : this.ruleForm.luckyDrawMassage,
              //clientTagsId : 'etHf13BgAAu1l1Q_dS3JNegL6yMEALbA',
              //activityForm : '表单',
              empId : this.ruleForm.empId,
              activityInstanceStatus : '未开始',
              reminder: this.ruleForm.reminder,
              orgId : this.ruleForm.orgId,
              orgNum : this.ruleForm.orgNum,
              companyId : this.ruleForm.companyId
          }
          var lotteryRules = {
              lotteryRulesTotal : this.ruleForm.lotteryRulesTotal,/*中奖总次数*/
              lotteryRulesPerday : this.ruleForm.lotteryRulesPerday,/*每人每天抽奖次数*/
              perNum : this.ruleForm.perNum,  /*每人总共抽奖次数*/
              lotteryRulesProportion : this.ruleForm.lotteryRulesProportion /*助力人数*/
          }
        var prizes = this.tableData
        let activityInstanceVo = {activityInstance, lotteryRules, prizes}
        let that = this
        that.$request("/api/activityInstanceVo/addVo/1_0", activityInstanceVo, "POST").then((data) => {
            if(data.data == -1) {
                this.$message({
                    message: data.message,
                    type: 'info'
                });
            }else {
                this.$message({
                    message: "创建活动成功",
                    type: 'success'
                });
                this.$emit("currentHandler", "first")
            }

        })
    },


    //==
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    up() {
      this.active = 0
    },
    up2() {
      this.active = 1
    },
    back() {
      this.$emit("currentHandler", "first")
    },
  }
}
</script>

<style scoped>

</style>
